<template>
  <div class="h-[44px] flex justify-between items-center">
    <div class="flex items-center">
      <span class="text-[#333] text-base">{{person.name}}</span>
      <span class="ml-2 text-[#999] text-sm">{{sex_obj[person.sex]}}</span>
      <span class="ml-2 text-[#999] text-sm">{{person.age}}岁</span>
      <span class="ml-2 w-[40px] h-4 rounded-sm  text-[#fff] text-[8px] flex justify-center items-center" :class="String(person.confirm_status) === '2' ? 'bg-[#00d550]' : 'bg-[#ff6029]'">{{confirm_status_obj[person.confirm_status]}}</span>
    </div>
    <template v-if="String(person.confirm_status) === '2'">
      <span v-if="String(person.isolate_status) !== '2'" class="text-[#2e7cff] text-sm">结束日期：{{person.isolate_endtime}}</span>
      <span v-else class="text-[#00d550] text-sm">隔离结束</span>
    </template>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Person } from '@/types/person'
import { usePersonStore } from '@/store/person'

export default defineComponent({
  name: 'Name',
  props: {
    person: {
      type: Object,
      default: () => {}
    },
  },
  setup(props) {
    const store = usePersonStore()
    const person = computed(() => props.person as Person)
    const sex_obj = computed(() => store.sex_obj)
    const confirm_status_obj = computed(() => store.confirm_status_obj)

    return {
      person,
      sex_obj,
      confirm_status_obj
    }
  }
})
</script>
